<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父元素高度坍塌解决方案</title>
		<style>
			
			.fu{
				border: 5px solid #000;
				float: /* left */;
				
			}
			
			.fu > div{
				height: 100px;
				width: 100px;
			}
			.z1{
				background-color: red;
				float: left;
			}
			.z2{
				background-color: orange;
				float: left;
			}
			.z3{
				background-color: yellow;
				float: left;
			}
			.z4{
				background-color: green;
				float: left;
			}			
			.z5{
				background-color: cyan;
				/* float: left; */
				/*  解决方案3：清除左右两个方向子元素浮动对父元素产生的影响
				  此元素不能浮动，清除的是此元素之前的元素浮动对父级造成的影响*/
				clear: both;
					
			}
						
		</style>
			
	</head>
	<body>
		
		<div class="fu">
			
			<div class="z1"></div>
			<div class="z2"></div>
			<div class="z3"></div>
			<div class="z4"></div>
			<div class="z5"></div>
			<!-- 解决方案2；用一个空的子元素顶起父元素的高度 -->
			<!-- <div class="z6"></div> -->
				
			
		</div>
		
		

		
		
		
		
		
	</body>
</html>